<template>
	<view class="order-container " :class="themeStyle">
		<scroll-view id="tab-bar" class="order-nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view class="uni-tab-item" @click="switchs(index)" v-for="(item,index) in statusList" :key="index" :id="index">
				<text class="uni-tab-item-title" :class="index == switchstatus ? 'uni-tab-item-title-active ns-border-color ns-text-color' :'' ">{{ item.name }}</text>
			</view>
		</scroll-view>

		<mescroll-uni ref="mescroll" @getData="getListData" :top="90">
			<!--商品清单-->
			<block slot="list">
				<view class=""  v-if="switchstatus == 0">			
				<view class="order-list" v-if="orderList.length > 0">
					<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
						<view class="order-header">
							<text class="site-name" @click="$util.redirectTo('/otherpages/shop/index/index?site_id='+orderItem.site_id)">{{ orderItem.site_name}}</text>
							<view class="iconfont iconright" @click=""></view>
						</view>
						<view class="order-body">
							<view class="goods-wrap">
								<view class="goods-img">
									<image :src="$util.img(orderItem.sku_image.split(',')[0], { size:$util.goodsImgType('mid',orderItem.source) })"  mode="aspectFill"
									 :lazy-load="true"></image>
								</view>
								<view class="goods-info">
									<view class="goods-name">{{ orderItem.sku_name }}</view>
									<view class="goods-sub-section">
										<view>
											<text class="goods-price ns-text-color">
												<text class="unit">{{ $lang('common.currencySymbol') }}</text>
												<text>{{ orderItem.price }}</text>
											</text>
										</view>
										<view>
											<text>
												<text class="iconfont iconclose"></text>
												{{ orderItem.num }}
											</text>
										</view>
									</view>
									<view class="goods-name">{{ orderItem.refund_status_name }}</view>
									<text class="tip" v-if="orderItem.is_present">赠品</text>
									<view class="goods-operation">
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="order-base-info">
								
							</view>
						</view>
					</view>
				</view>
				<view v-else>
					<ns-empty :isIndex="!1" :text="text"></ns-empty>
				</view>
			</view>
	
			<!--相关订单列表-->
			<view class="" v-else>
				
			
				<view class="cate-search">
					<view class="search-box">
						<input class="uni-input" maxlength="50" v-model="inputValue" confirm-type="search" @focus="inputFocus" @input="inputInput"
						 @confirm="search()" placeholder="请输入订单提货码" />
						<text class="iconfont iconIcon_search" @click="search()"></text>
					</view>
				</view>
				<view class="order-list" v-if="orderLists.length > 0">
					<view class="order-item" v-for="(orderItem, orderIndex) in orderLists" :key="orderIndex">
						<view class="order-header">
							<text class="site-name" @click="">{{ orderItem.order_no }}</text>
							<view class="iconfont iconright" @click=""></view>
							<text class="status-name ns-text-color">{{ orderItem.order_status_name }}</text>
						</view>
						<view class="order-body">
							<view class="goods-wrap" v-for="(goodsItem,goodsIndex) in orderItem.order_goods" :key="goodsIndex">
								<view class="goods-img">
									<image :src="$util.img(goodsItem.sku_image.split(',')[0], { size:$util.goodsImgType('mid',goodsItem.source) })" @error="imageError(orderIndex,goodsIndex)" mode="aspectFill"
									 :lazy-load="true"></image>
								</view>
								<view class="goods-info">
									<view class="goods-name">{{ goodsItem.sku_name }}</view>
									<view class="goods-sub-section">
										<view>
											<text class="goods-price ns-text-color">
												<text class="unit">{{ $lang('common.currencySymbol') }}</text>
												<text>{{ goodsItem.price }}</text>
											</text>
										</view>
										<view>
											<text>
												<text class="iconfont iconclose"></text>
												{{ goodsItem.num }}
											</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="order-base-info">
								<view class="order-type">
									提货码：<text class="ns-text-color">{{ orderItem.access_code }}</text>
								</view>
								<view class="total">
									<text>
										实付：
										<text class="ns-font-size-sm">{{ $lang('common.currencySymbol') }}</text>
										{{ orderItem.pay_money }}
									</text>
								</view>
							</view>
							<view class="order-base-info">
								<view class="order-type">
									姓名:<text class="ns-text-color">{{ orderItem.name }}</text>
								</view>
								<view class="total">
									<text>
										电话:
										<text class="ns-text-color" @click="$util.copy(orderItem.mobile)">{{ orderItem.mobile }}</text>
									</text>
								</view>
							</view>
							<!-- <view class="order-base-info">
							
								<view class="order-type">
									电话:<text class="ns-text-color">{{ orderItem.mobile }}</text>
								</view>
							</view> -->
							<view class="order-base-info">
								<view class="order-type">
									<text class="ns-text-color">{{ $util.timeStampTurnTime(orderItem.create_time) }}</text>
								</view>
								<view class="total">
									<!-- v-if="orderItem.order_status == 5" -->
									<text class="submit" @click="pickup(orderItem.order_id,delivery_id)" v-if="orderItem.order_status == 5 && orderItem.order_type == 5">
										一键提货
									</text>
								</view>
							</view>
							
						</view>
					</view>
				</view>
				<view v-else>
					<ns-empty :isIndex="!1" :text="text"></ns-empty>
				</view>
			</view>
			</block>
		
		</mescroll-uni>
		<loading-cover ref="loadingCover"></loading-cover>
		
	</view>
</template>

<script>
	export default {
		name: 'detail',
		components:{},
		data() {
			return {
				scrollInto: '',
				orderStatus: 'all',
				switchstatus: 1,
				statusList: [
					{
						name:'商品清单',
						status: 0,
					},
					{
						name:'相关订单',
						status: 0,
					},
				],
				orderList: [],
				orderLists: [],
				contentText: {},
				mergePayOrder: [],
				text:'您还暂无相关订单',
				delievry_id: 0,
				inputValue: '',
				order_id: 0,
				delivery_ids: 0,
			};
		},
		onLoad(option) {
			if(option.delivery_id) {
				this.delivery_id = option.delivery_id;
			}
			if(option.oid) {
				this.order_id = option.oid || 0;
			}
			
			if(option.scene) {
				var sceneParams = decodeURIComponent(option.scene);
				sceneParams = sceneParams.split('&');
				if (sceneParams.length) {
					sceneParams.forEach(item => {
						var arr = new Array();
						arr = item.split('-');	
						if(arr[0] == 'oid') {
							this.order_id = parseInt(arr[1]);
						}
					});
				}
			}
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			if (uni.getStorageSync('token')) {
				// setTimeout(()=>{
				// 	if (this.$refs.mescroll) this.$refs.mescroll.refresh();
				// },1000);
				
			} else {
				this.$util.redirectTo('/pages/login/login/login', {
					back: '/promotionpages/order/list/list?status=' + this.orderStatus
				});
			}
			this.getOrderGoodsList();
		},
		methods: {
			//input框输入事件
			inputInput(e) {
				if (e.detail.value) {
					
				}
			},
			//input框获取焦点事件
			inputFocus(e) {
				if (this.inputValue.trim() != '') this.orderLists = [];
			},
			//搜索
			search() {
				if (this.inputValue.trim() != '') {
					this.$refs.mescroll.refresh();
				} else {
					this.$util.showToast({
						title: '搜索内容不能为空哦'
					});
				}
			},
			pickup(o_id,d_id) {
				this.$api.sendRequest({
					url: '/pickpoint/api/order/optionOrderComplete',
					data: {
						delivery_id: d_id,
						order_id: o_id,
					},
					success: res => {
						if(res.code == 0) {
							this.$util.showToast({
								title: '已提货',
							})
							this.$refs.mescroll.refresh();
						}else {
							this.$util.showToast({
								title: res.data
							})
						}
					},
					fail: res => {
						this.$util.showToast({
							title: '提货失败，请重新提取',
						})
					}
				});
			},
			switchs(e) {
				this.switchstatus = e;
				this.$refs.mescroll.refresh();
			},
			getListData(mescroll) {
				if(this.switchstatus == 1) {
					this.$api.sendRequest({
						url: '/pickpoint/api/order/orderlist',
						data: {
							page: mescroll.num,
							page_size: mescroll.size,
							delivery_id: this.delivery_id,
							order_id: this.order_id,
							keywords: this.inputValue
						},
						success: res => {
							if(res.code==-1&&res.error_code=='TOKEN_ERROR'){
								if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
								this.$util.showToast({'title':'登录失败'});
								let pageRouter=getCurrentPages();
								let data=pageRouter[pageRouter.length-1].options;
								let back=pageRouter[pageRouter.length-1].route;
								data.back=back;
								setTimeout(()=>{
									this.$util.redirectTo('/pages/login/login/login', data);
								},1500)
								return;
							}
							let newArr = []
							let msg = res.message;
							if (res.code == 0 && res.data) {
								newArr = res.data.list;
							} else {
								this.$util.showToast({
									title: msg
								})
							}
							mescroll.endSuccess(newArr.length);
							//设置列表数据
							if (mescroll.num == 1) this.orderLists = []; //如果是第一页需手动制空列表
							this.orderLists = this.orderLists.concat(newArr); //追加新数据
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						},
						fail: res => {
							mescroll.endErr();
							if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
						}
					});
				}else {
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					this.getOrderGoodsList();
				}
			},
			getOrderGoodsList() {
				this.$api.sendRequest({
					url: '/pickpoint/api/order/ordergoods',
					data: {
						delivery_id: this.delivery_id,
					},
					success: res => {
						if(res.code == 0 && res.data) {
							this.orderList = res.data;
						}
					},
					fail: res => {
					
					}
				});
			},
			imageError(orderIndex, goodsIndex) {
				this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			},
			toShopDetail(e){
				this.$util.redirectTo('/otherpages/shop/index/index', { site_id: e});
			}
		},
		computed: {
			//vueX页面主题
			themeStyle() {
				return 'theme-' + this.$store.state.themeStyle
			}
		}
	};
</script>

<style lang="scss">
	
	
	.cate-search {
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		padding: 10rpx $ns-padding;
		box-sizing: border-box;
	
		input {
			font-size: $ns-font-size-base;
			height: 60rpx;
			padding: 15rpx 25rpx 15rpx 40rpx;
			line-height: 60rpx;
			width: calc(100% - 120rpx);
		}
	
		text {
			font-size: 50rpx;
			color: $ns-text-color-gray;
			width: 120rpx;
			text-align: center;
		}
	
		.search-box {
			width: 100%;
			height: 100%;
			background: $uni-bg-color-grey;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
		}
	}

	.order-container {
		width: 100vw;
		height: 100vh;
	}
	
	.order-nav {
		width: 100vw;
		height: 70rpx;
		flex-direction: row;
		white-space: nowrap;
		background: #fff;
		// border-bottom-left-radius: 24rpx;
		// border-bottom-right-radius: 24rpx;
		padding-bottom: 10rpx;
		padding-top: 10rpx;
		position: fixed;
		left: 0;
		z-index: 998;
	
		.uni-tab-item {
			display: inline-block;
			flex-wrap: nowrap;
			// padding-left: 10rpx;
			// padding-right: 10rpx;
			padding-left: 15vw;
			padding-right: 15vw;
		}
	
		.uni-tab-item-title {
			color: #555;
			font-size: 30rpx;
			display: block;
			height: 64rpx;
			line-height: 64rpx;
			border-bottom: 2px solid #fff;
			padding: 0 10rpx;
			flex-wrap: nowrap;
			white-space: nowrap;
		}
	
		.uni-tab-item-title-active {
			display: block;
			height: 64rpx;
			border-bottom: 2px solid #ffffff;
			padding: 0 10rpx;
		}
	
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
	}
	.order-item {
		margin: $ns-margin;
		padding: $ns-padding;
		border-radius: $ns-border-radius;
		background: #fff;
		position: relative;
	
		.order-header {
			display: flex;
			align-items: center;
			position: relative;
	
			&.waitpay {
				padding-left: 50rpx;
	
				.iconyuan_checked,
				.iconyuan_checkbox {
					font-size: 36rpx;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
				}
				.iconyuan_checkbox {
					color: $ns-text-color-gray;
				}
			}
	
			.icondianpu {
				display: inline-block;
				line-height: 1;
				margin-right: 12rpx;
				font-size: 30rpx;
			}
	
			.status-name {
				flex: 1;
				text-align: right;
			}
		}
	
		.order-body {
			.goods-wrap {
				margin-bottom: 20rpx;
				display: flex;
				position: relative;
	
				&:last-of-type {
					margin-bottom: 0;
				}
	
				.goods-img {
					width: 180rpx;
					height: 180rpx;
					padding: 20rpx 0 0 0;
					margin-right: 20rpx;
	
					image {
						width: 100%;
						height: 100%;
						border-radius: $ns-border-radius;
					}
				}
	
				.goods-info {
					flex: 1;
					position: relative;
					padding: 20rpx 0 0 0;
					max-width: calc(100% - 200rpx);
					.tip{
						background-color: #f44336;
						font-size: $ns-font-size-sm;
						color:#fff;
						padding:6rpx 10rpx;
						border-radius: 6rpx;
					}
					.goods-name {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						line-height: 1.5;
						font-size: 28rpx;
					}
	
					.goods-sub-section {
						width: 100%;
						line-height: 1.3;
						display: flex;
	
						.goods-price {
							font-weight: 700;
							font-size: 15px;
						}
	
						.unit {
							font-weight: normal;
							font-size: 24rpx;
							margin-right: 2rpx;
						}
	
						view {
							flex: 1;
							line-height: 1.3;
							&:last-of-type {
								text-align: right;
	
								.iconfont {
									line-height: 1;
									font-size: 26rpx;
								}
							}
						}
					}
	
					.goods-operation {
						text-align: right;
						padding-top: 20rpx;
	
						.operation-btn {
							line-height: 1;
							padding: 14rpx 20rpx;
							color: #333;
							display: inline-block;
							border-radius: 28rpx;
							background: #fff;
							border: 0.5px solid #999;
							font-size: 24rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}
	
		.order-footer {
			.order-base-info {
				display: flex;
	
				.total {
					text-align: right;
					padding-top: 20rpx;
					flex: 1;
	
					& > text {
						line-height: 1;
						margin-left: 10rpx;
					}
					
					.submit {
						border: 1px solid #FF335C;
						padding: 10rpx $ns-padding;
						border-radius: 10rpx;
						color: #FF335C;
					}
				}
	
				.order-type {
					padding-top: 20rpx;
					flex: 0.7;
	
					& > text {
						line-height: 1;
					}
				}
			}
	
			.order-operation {
				text-align: right;
				padding-top: 20rpx;
	
				.operation-btn {
					line-height: 1;
					padding: 20rpx 26rpx;
					color: #333;
					display: inline-block;
					border-radius: 32rpx;
					background: #fff;
					border: 0.5px solid #999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	
	.empty {
		padding-top: 200rpx;
		text-align: center;
	
		.empty-image {
			width: 180rpx;
			height: 180rpx;
		}
	}
	
	.order-batch-operation {
		position: fixed;
		z-index: 5;
		left: 0;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background: #fff;
		box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
		text-align: right;
	
		&.bottom-safe-area {
			padding-bottom: 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
		}
	
		.operation-btn {
			height: 68rpx;
			line-height: 68rpx;
			background: #fff;
			padding: 0 40rpx;
			display: inline-block;
			text-align: center;
			margin: 16rpx 20rpx 16rpx 0;
			border-radius: 40rpx;
			border: 0.5px solid #ffffff;
	
			&.white {
				height: 68rpx;
				line-height: 68rpx;
				color: #333;
				border: 0.5px solid #999;
				background: #fff;
			}
		}
	}
	
</style>
<style scoped>
	/deep/ .uni-page {
		overflow: hidden;
	}

	/deep/ .mescroll-upwarp {
		padding-bottom: 100rpx;
	}
	.order-container{
		padding-top:1px;
		
	}
	
	/deep/ .ns-downwarp-content {
		display: none;
	}
</style>
